<template>
	<view>
		<view class="tabs flex flai fljcsb">
			<text v-for="(item,index) in tabs" :key="index" @click="navTab(index)" class="flex1" :class="[tabsIndex==index?'active':'']">{{item}}</text>
		</view>
		<view class="order-box" v-if="orderList.length>0">
			<view class="order-list" v-for="(item,index) in orderList" :key="index">
				<view class="order-head flex flai fljcsb">
					<view class="pack">包裹 {{index+1}} <text style="color: #666;font-size: 28rpx;margin-left:40rpx">{{item.goodsList[0].addTime}}</text></view>
					<view class="head-right flex flai">
						<text class="status" v-if="item.packStatus==101">待付款</text>
						<text class="status" v-else-if="item.packStatus==102">待发货</text>
						<text class="status" v-else-if="item.packStatus==103">待收货</text>
						<text class="status-finshed" v-else>已完成</text>
						<view class="arrow" @click="showAndHide(index)">
							<image src="../../static/img/my/arrow-down.png" mode="" v-if="!item.isShow"></image>
							<image src="../../static/img/my/arrow-up.png" mode="" v-else></image>
						</view>

					</view>
				</view>
				<view class="store-box" v-if="item.isShow">
					<view class="store-list" v-for="(itemSecnond,indexSecond) in item.goodsList" :key="index">
						<view class="name-and-price flex flai" @click="toDetail(item.id,item.packStatus,item.packId)">
							<text class="name line-clamp-one flex1">{{itemSecnond.goodsName}}</text>
							<text class="price">￥{{itemSecnond.price}}</text>
						</view>
						<view class="store-name flex flai" @click="toDetail(item.id,item.packStatus,item.packId)">
							<image src="../../static/img/my/store.png" mode=""></image>
							<text class="flex1">{{itemSecnond.merchantName}}</text>
						</view>
						<view class="store-address flex flai" @click="toDetail(item.id,item.packStatus,item.packId)">
							<image src="../../static/img/ding02.png" mode=""></image>
							<text class="flex1 line-clamp-one">{{itemSecnond.storeLocation}}</text>

						</view>
						<view class="order-btn" @click="toBuyOnce(index,indexSecond)">再次购买</view>
					</view>
				</view>

			</view>

		</view>
		<view class="no-data" v-else>
			<image src="../../static/img/noData.png" mode=""></image>
			<view>暂无数据，<navigator url="/pages/search/search">快去采购吧</navigator>
			</view>
		</view>
		
		<view class="loading flex flai fljc" v-if="loading">
			<image src="../../static/img/loading2.gif" mode="" v-if="loadPic"></image>
			<text>{{msg}}</text>
		</view>
	</view>
</template>

<script>
	import API from '../../api/index.js'
	export default {
		data() {
			return {
				tabs: ['全部', '待付款', '待发货', '待收货', '已完成'],
				tabsIndex: 0,
				orderList: [],
				page: 1,
				isPull: true,
				loading:false,
				msg:'加载中...',
				loadPic:true
			}
		},
		onLoad(opt) {
			console.log(opt)
			this.tabsIndex = opt.state
			this.stateChange(Number(opt.state))

		},
		methods: {
			stateChange(num) {
				console.log(num)
				var showType = ''
				switch (num) {
					case 0:
						showType = ''
						break;
					case 1:
						showType = '101'
						break;
					case 2:
						showType = '102'
						break;
					case 3:
						showType = '103'
						break;
					case 4:
						showType = '104'
						break;
				}
				console.log(showType)
				this.showType = showType
				this.geOrderList()

			},
			navTab(index) {
				this.tabsIndex = index
				this.orderList=[]
				this.loading = false
				this.msg='加载中...'
				this.loadPic = true
				this.stateChange(index)

			},
			showAndHide(index) {
				var list = JSON.parse(JSON.stringify(this.orderList))
				list[index].isShow = !list[index].isShow
				this.orderList = list
			},
			geOrderList() {
				var data = {
					page: this.page,
					size: 10,
					showType: this.showType
				}
				this.loading = true
				API.indexHome.oderList(data).then(res => {
					if (res.errno == 0) {
						var list = [...this.orderList, ...res.data]
						for (var k in list) {
							if (k == 0) {
								list[k]['isShow'] = true
							} else {
								list[k]['isShow'] = false
							}

						}
						if (res.data.length>0 && res.data.length < 10) {
							this.isPull = false
							this.msg ='主人我是有底线的哟~~'
							this.loadPic = false
						} else {
							this.isPull = true
							setTimeout(()=>{
								this.loading = false
							},500)
							
						}

						this.orderList = list
					} else {
						setTimeout(()=>{
							this.loading = false
						},500)
					}
				})
			},
			// 再次，购买、
			toBuyOnce(index, indexSecond) {
				var name = this.orderList[index].goodsList[indexSecond].goodsName
				uni.navigateTo({
					url: '/pages/search/search?keyword=' + name
				})
			},
			toDetail(id, status,packid) {
				uni.navigateTo({
					url: '/pages/orderDetail/orderDetail?id=' + id + '&status=' + status +'&packid=' + packid
				})
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.orderList = []
			this.geOrderList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if (this.isPull) {
				var page = this.page + 1
				console.log(page)
				this.page = page
				this.geOrderList()
			}
		}
	}
</script>

<style>
	@import url("./index.css");
</style>
